<gm:page title="Búsqueda de Cajeros Santander (beta)"
         authenticate="false">
          
  <!--
    Esta aplicacion sirve para ubicar en un mapa los cajeros
    de Santander que estan en un determinado codigo postal.
    @author: j.oscar.cuenca
  -->

<script type="text/javascript">
  
    function initMap(lugar) {      
      google.mashups.getObjectById("myMap").centerOnLocation(lugar);
      google.mashups.getObjectById("myMap").getMap().setZoom(10);
    }
  
    function onMapSubmit(entry) {
      //alarm("search submit cazado");
    }
    
    function onMapSelect(entry) {
      if (entry) {
        var sitio = new GPath("atom:title").getValue(entry);
        google.mashups.getObjectById("myMap").centerOnLocation(sitio.toString());
      //  google.mashups.getObjectById("myMap").getMap().setZoom(15);
        google.mashups.getObjectById("myMap").showAllMarkers(); // If all markers must be displayed
      } else {
        google.mashups.getObjectById("myMap").showAllMarkers(); // If no entry selected, zoom out
      }
    }
  
</script> 
 
 <style>
.gm-section-tab {
background-color:#cccccc;
color:#666666;
margin: 4px;
padding: 6px 10px 6px 10px;
display: inline;
font-size: 10pt;
}
.gm-section-tab-selected {
background-color:#ff0000;
color:#ffffff;
padding: 6px 10px 8px 12px;
border: solid #ff0000 2px;
}
.gm-section-tabs {
padding: 0px 0px 8px 8px;
border-bottom: 5px solid #ff0000;
}

</style>
 

<!-- Lista de pestanyas -->
<gm:tabs target="miContenedor"/>

<!-- Contenedor que alberga las secciones (cada una es una pestanya -->    
<gm:container id="miContenedor" style="padding:10px">

<!-- Pestanya "caratula" -->
<gm:section id="inicio" title="Inicio">
  <table style="width:100%; border:solid red 1px">
    <tr>
      <td>
        <p align="center" style="padding:15px">
          <img src="./resources/cajero.jpg" alt="imagen de cajero">
        </p>
      </td>
    </tr>
    <tr>
      <td bgcolor="#ff0000">
        <p align="center" style="color:#ffffff; padding:5px; font-size:16pt">
          <img src="./resources/simboloSantander.gif" alt="logo Santander">
          <br/>
          Buscador de Cajeros Santander
        </p>
      </td>
    </tr>
    <tr>
      <td>
        <p align="center" style="color:#ff0000; padding:15px; font-size:8pt">
        (Piloto en pruebas con datos de Madrid)</p>
      </td>
    </tr>
  </table>
</gm:section>

<!-- Pestanya cajeros obtiene los cajeros de un documento en Google Docs -->
<gm:section id="cajerosTab" title="Buscador">
  
  <!-- Conjunto de Mapa, Busqueda por C.P. y Tabla de Cajeros -->
  <table style="width:100%; border:solid red 1px">
    <tr>
      <td colspan="2" bgcolor="#ff0000" style="padding: 2px">
        <p align="center" style="color:#ffffff; font-size:14pt">
        <img align="bottom" src="./resources/simboloSantanderPeq.gif alt="logo Santander">
        Búsqueda y Plano de Cajeros Santander
        </p>
      </td>
    </tr>
    <tr valign="top">
    
      <!-- Lista de cajeros -->
      <!--
           OJO A LA URL DEL FEED:
           ======================
           que en vez de:
             http://spreadsheets.google.com/feeds/list/pN8VhIzLUtsoTvPCSHB5zYQ/od6/public/basic
           debe ser:
             http://spreadsheets.google.com/feeds/list/pN8VhIzLUtsoTvPCSHB5zYQ/od6/public/values
      -->
      <td align="left" style="padding:15px">
        <p>
        1.- Seleccione código postal para conocer los cajeros de esa zona.
        <br/>
        <small>(Si tiene dudas, consulte la ayuda).</small>
        </p>
        
        <!-- Busqueda por CP -->
        <gm:search id="mySearch"
                   data="http://spreadsheets.google.com/feeds/list/pqmyEa4585RLXno5OwqeIFg/od6/public/values"
                   ref="gsx:cp"
                   hint="Introduzca Código Postal">
          <gm:handleEvent event="submit" execute="initMap('Madrid, España')"/>
        </gm:search>
        
        <p/>
        <p>
        2.- Seleccione un cajero de la lista o directamente en el mapa
        para obtener más detalle.
        </p>
        
        <!-- Tabla cajeros x CP -->
        <gm:list id="myList"
               pagesize="10"
               data="${mySearch}"
               template="listTemplate">
          <gm:handleEvent src="myMap" event="select"/>
        </gm:list>
      </td>
 
      <!-- Mapa -->

      <td align="center" style="width:350px; padding:5px">
        <gm:map id="myMap" data="${mySearch}" control="small"
            geolocationref="atom:title"
            infotemplate="myMapDetailsTemplate"
            width="350px" height="400px" 
            lat="35.0" lng="-8.0" zoom="4" maptypes="false"
            create="false"
            style="border:solid red 1px">
          <gm:handleEvent src="myList" event="select"/>
          <gm:handleEvent event="select" execute="onMapSelect(event.entry)"/>
        </gm:map>
      </td>
     
    </tr>
  </table>
</gm:section>

<!-- Pestanya "ayuda" -->
<gm:section id="ayuda" title="Ayuda">
  <table style="width:100%; border:solid red 1px">
    <tr>
      <td bgcolor="#ff0000" style="padding: 5px">
        <p align="center" style="color:#ffffff; font-size:16pt">
        <img src="./resources/simboloSantander.gif alt="logo Santander">
        <br/>
        Ayuda de Cajeros Santander (beta)
        </p>
      </td>
    </tr>
    <tr>
      <td style="padding: 5px">
        <div style="font-size:8pt">
          <p>
          Se introduce un código postal válido de 5 cifras
          en la caja de texto (28xxx).
          </p>
          <p>
          Ejemplos de códigos postales válidos:
          <ul>
            <li>28001</li>
            <li>28925</li>
          </ul>
          </p>
          <p>
          En unos segundos aparecerá la lista de cajeros disponibles
          en dicho código postal.  Si no aparece ninguno se debe a que
          no hay cajeros en el código postal proporcionado.
          <p>
          Si hubiese más de 10 cajeros en dicho código postal se paginarán
          los resultados para presentarlos de 10 en 10.  Al final de la lista
          aparece el control de paginación.
          </p>
          <p>
          En el mapa aparecerán todos los cajeros del código postal
          seleccionado (no sólo 10 como en la lista).
          </p>
          <p>
          Seleccione en el mapa o en la lista para ver los detalles
          de la ubicación del cajero.
          </p>
        </div>
      </td>
    </tr>
    <tr>
      <td bgcolor="#ff0000" style="padding: 5px">
        <p align="center" style="color:#ffffff; font-size:8pt">
        ESTE COMPONENTE ES DE PRUEBA Y POR TANTO NO ES DE UTILIZACION
        PUBLICA.  SE DECLINA CUALQUIER RESPONSABILIDAD POR MAL
        FUNCIONAMIENTO.
        </p>
      </td>
    </tr>
  </table>
</gm:section>

<!-- PestaÃ±a "acerca de" -->
<gm:section id="acercaDe" title="Acerca de">
  <table style="width:100%; border:solid red 1px">
    <tr>
      <td bgcolor="#ff0000" style="padding: 5px">
        <p align="center" style="color:#ffffff; font-size:16pt">
        <img src="./resources/simboloSantander.gif alt="logo Santander">
        <br/>
        Acerca de Cajeros Santander
        <br/>
        v1.0 beta
        </p>
      </td>
    </tr>
    <tr>
      <td style="padding: 5px">
        <div style="font-size:8pt">
          <p>
          Localización en Google Maps de los cajeros de Santander
          (piloto con datos limitados a Madrid y su provincia)
          ubicados en el código postal proporcionado por el usuario.
          </p>
          <p>
          Técnicamente se obtienen los datos de una fuente RSS que es
          una hoja de cálculo en Google Docs.
          </p>
          <p/>
          <p>
          Autor: Arq. Técnica - Portales y Colaboración.
          <br/>
          Fecha: 3 de febrero de 2008
          </p>
        </div>
      </td>
    </tr>
    <tr>
      <td bgcolor="#ff0000" style="padding: 5px">
        <p align="center" style="color:#ffffff; font-size:8pt">
        ESTE COMPONENTE ES DE PRUEBA Y POR TANTO NO ES DE UTILIZACION
        PUBLICA.  SE DECLINA CUALQUIER RESPONSABILIDAD POR MAL
        FUNCIONAMIENTO.
        </p>
      </td>
    </tr>
  </table>
</gm:section>

</gm:container>
  
  <gm:template id="myMapDetailsTemplate">
    <table style="width:200px">
      <tr>
        <td style="font-size: 8pt">
          <b>Dirección: </b><br/><gm:text ref="atom:title"/>
          <br/>
          <b>Oficina: </b><gm:text ref="gsx:sucursal"/>
          <br/>
          <b>Disponibilidad: </b><gm:text ref="gsx:disponibilidad"/>
        </td>
      </tr>
    </table>
  </gm:template>

  <gm:template id="listTemplate">
    <table style="width:100%;border: solid red 1px">
      <thead style="color: red">
        <tr>
          <th colspan="4">
            Tabla de cajeros encontrados
          </th>
        </tr>
        <tr>
          <th>Dirección del cajero</th>
          <th>C.P.</th>
          <th>Localidad</th>
          <th>Prov.</th>
        </tr>
      </thead>
      <tfoot style="color: grey">
        <tr>
          <td colspan="4" align="center"><gm:pager/></td>
        </tr>
      </tfoot>
      <tbody repeat="true" style="font-size: 8pt">
        <tr style="color:red">
          <td><gm:text ref="gsx:direccion" hint="Dirección"/></td>
          <td><gm:text ref="gsx:cp" hint="C.Postal"/></td>
          <td><gm:text ref="gsx:localidad" hint="Localidad"/></td>
          <td><gm:text ref="gsx:provincia" hint="Prov."/></td>
        </tr>
      </tbody>
    </table>   
    <p>
      
    </p>
  </gm:template>

</gm:page>


